<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>垂直对齐方式</title>
		<style>
			
			div {
				background-color: yellow;
				height: 200px;
			}

			div span {
				font-size: 50px;
			}

			.m {
				height: 200px;
				/*
					让元素同时具有行内元素和块元素的部分特征
				*/
				display: inline-block;
			}

			div>* {
				/* 
					垂直对齐方式
					baseline: 基线对齐;
					top: 顶端对齐;
					bottom: 底部对齐;
					middle: 居中对齐;
				*/
				/*vertical-align: middle;*/
			}

			.box {
				width: 500px;
				height: 500px;
				background-color: pink;
				text-align: center;
			}
	
			img {
				width: 100px;
			}

			.box>img {
				vertical-align: middle;
			}

			.box>em {
				display: inline-block;
				height: 500px;
				vertical-align: middle;
				/*width: 50px;*/
				background-color: red;
			}

		</style>
	</head>
	<body>


		<div>
			<span>QQ</span>
			<em>6.1</em>
			<em class="m"></em>
		</div>

		<div class="box">
			<img src="img/girl3.jpg" alt="">
			<em></em>
		</div>
		
	</body>
</html>